<template>
    <div>
      <ul>
        <li v-for="item in todolist" :key="item.id">
          <label>
            <input
              type="checkbox"
              :checked="item.isdone"
              @change="changeChecked(item.id)"
            />
            <span>{{ item.content }}</span>
          </label>
          &nbsp;
          <button @click="deleteDoto(item.id)">删除</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: "TodoList",
    props: ["todolist", "changeTodo", "delTodo"],
    methods: {
      changeChecked(id) {
        console.log(id);
        this.changeTodo(id);
      },
      deleteDoto(id) {
        this.delTodo(id);
      },
    },
  };
  </script>
  
  <style lang='stylus' scoped>
  ul, ol, li {
    list-style: none;
  }
  </style>
  
  